<template>
  <div class="docs">
    <div class="docs-container">
      <HeaderNav class="docs-header" />
      <div class="page-container">
        <LeftSideNav class="left-nav" />
        <div class="right-nav">
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import HeaderNav from './header-nav.vue'
import LeftSideNav from './left-side-nav.vue'
export default {
  components: {
    HeaderNav,
    LeftSideNav
  },
  name: "docs-route",
  data() {
    return {
      
    }
  },
  computed: {

  },
  created() {

  },
  methods: {

  }
}
</script>

<style scoped lang="scss">
  .docs {
    width: 100vw;
    height: 100vh;

    &-container {
      width: 1140px;
      margin: 0 auto;
      position: relative;
    }

    &-header {
      width: 100%;
      height: 80px;
      position: fixed;
      top: 0;
      left: 0;
      background-color: #fff;
      border-bottom: 1px solid #dcdfe6;
      // z-index: 1500;
      z-index: 10;
    }

    .page-container {
      width: 100%;
      padding-top: 80px;
      display: flex;

      .left-nav {
        width: 240px;
        height: calc(100% - 50px);
        overflow: auto;
        position: fixed;
      }

      .right-nav {
        width: 900px;
        padding: 50px 0;
        position: absolute;
        left: 240px;
      }
    }
  }
</style>
